<template>
  <el-dialog
    v-model="store.isVisible"
    :title="store.title"
    width="500px"
    @close="store.cancel()"
  >
    <el-card>
      <div style="max-height: 60vh; overflow-y: auto;">
        <el-row v-for="(option, index) in store.options" :key="index" style="margin-bottom: 0;">
          <el-col :span="24">
            <el-checkbox
              :model-value="store.selectedIndices.includes(index)"
              @change="store.toggleSelection(index)"
              style="width: 100%; padding: 8px;"
            >
              {{ t(option) }}
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
    </el-card>
    
    <template #footer>
      <el-button @click="store.cancel()">
        {{ t('Cancel') }}
      </el-button>
      <el-button 
        type="primary"
        @click="store.confirm()"
      >
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useMultiSelectStore } from '@/stores/multiSelect'
import { useLanguageStore } from '@/stores/language'

const store = useMultiSelectStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'OK': {
      'en': 'OK',
      'zh': '确认'
    },
    'Cancel': {
      'en': 'Cancel',
      'zh': '取消'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script> 